<template>
  <view class="address">
    <view style="height: 20rpx;"></view>

    <view class="addressinfolist">
      <view class="addressinfoli">
        <view class="addressinfolileft">
          收件人
        </view>
        <input
          class="addressinfoliinput"
          type="text"
          value=""
          v-model="addressinfo.realname"
          placeholder="请填写收件人姓名"
          placeholder-style="font-size:28rpx;color:rgba(255,255,255,1);"
        />
      </view>
      <view class="addressinfoli">
        <view class="addressinfolileft">
          手机号码
        </view>
        <input
          class="addressinfoliinput"
          maxlength="11"
          type="number"
          value=""
          v-model="addressinfo.telephone"
          placeholder="请填写收件人手机号码"
          placeholder-style="font-size:28rpx;color:rgba(255,255,255,1);"
        />
      </view>
      <view class="addressinfoli">
        <view class="addressinfolileft">
          所在地区
        </view>
        <view
          class="addressinfoliinput right"
          @click="openAddres"
        >
          {{pca_name?pca_name:'请选择'}}
        </view>
      </view>
      <view class="addressinfoli addressinfolione">
        <view class="addressinfolileft">
          详细地址
        </view>
        <textarea
          class="addressinfolitextarea"
          type="text"
          v-model="addressinfo.address"
          placeholder-style="color:rgba(255,255,255,1);line-height:48rpx;"
          placeholder="请输入详细地址信息,不少于4个字"
        />
      </view>
    </view>
    <view class="saveaddress">

      <view
        class="saveaddressBtn saveaddressBtn1"
        @tap="saveUseinfo"
      >保存并使用</view>
      <view
        class="saveaddressBtn  btn-class"
        @tap="saveinfo"
      >保存</view>
    </view>
    <addressBox
      ref="addressBox"
      @addrFun="onConfirm"
    />
  </view>
</template>

<script>
import addressBox from '@/components/cityPicker/addressBox.vue'
export default {
  components: {
    addressBox,
  },
  data() {
    return {
      addressid: '',
      addressinfo: {
        realname: '',
        telephone: '',
        address: '', //详细地址
        province: '',
        city: '',
        country: '',
        id: '',
      },
      pca_name: '',
      addrCode: '',
      pca_nameArr: [],
      order_id: '', //订单id
      shopId: '', //门店id
    }
  },
  onLoad: function (option) {
    // #ifdef MP-WEIXIN
    // this.getLocation()
    // #endif
    // 如果存在则为修改接口，否则为新增地址，且新增时默认回显用户名等个人信息
    if (option.obj) {
      this.addressinfo = option.obj
      console.log('this.addressinfo', this.addressinfo)
      var addressinfo = decodeURIComponent(option.obj)
      this.addressinfo = JSON.parse(addressinfo)
      this.pca_nameArr.push(this.addressinfo.province)
      this.pca_nameArr.push(this.addressinfo.city)
      this.pca_nameArr.push(this.addressinfo.country)
      this.pca_name =
        this.addressinfo.province +
        this.addressinfo.city +
        this.addressinfo.country

      this.$nextTick(() => {
        this.$refs['addressBox'].setDefaultValue(this.pca_nameArr)
      })
    }
  },
  methods: {
    // 初始化事件
    init() {
      var that = this
      var data = {}
    },
    // 关于地址
    openAddres() {
      this.$refs['addressBox'].open()
    },
    onConfirm(e) {
      this.pca_name = e.name
      this.addressinfo.province = e.provinceName
      this.addressinfo.city = e.cityName
      this.addressinfo.country = e.areaName
      this.$forceUpdate()
    },
    onChange(e) {
      this.pca_name = e.label
      let label = e.label.split('-')
      console.log('label', label)
      this.addressinfo.province = label[0]
      this.addressinfo.city = label[1]
      this.addressinfo.country = label[2]
    },
    // 获取地址api
    // getLocation() {
    //   this.$publicFun.getLocation().then((res) => {
    //     this.addressinfo.longitude = res ? res.longitude : ''
    //     this.addressinfo.latitude = res ? res.latitude : ''
    //     console.log('当前位置的经度：' + res)
    //     console.log('当前位置的纬度：' + res)
    //   })
    // },
    //保存地址
    saveinfo() {
      var that = this
      if (!this.addressinfo.realname) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的姓名!',
        })
        return false
      }
      if (!this.$publicFun.regPhone.test(this.addressinfo.telephone)) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号!',
        })
        return false
      }
      if (
        this.addressinfo.province == '' ||
        this.addressinfo.city == '' ||
        this.addressinfo.country == ''
      ) {
        uni.showToast({
          icon: 'none',
          title: '请选择省市区！',
        })
        return false
      }
      if (this.addressinfo.address.length < 4) {
        uni.showToast({
          icon: 'none',
          title: '您的地址过短,请详细填写您的地址信息!',
        })
        return false
      }
      this.addressinfo.isDefault = false
      this.addAddressApi()
    },
    // 保存并使用
    saveUseinfo() {
      var that = this
      if (!this.addressinfo.realname) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的姓名!',
        })
        return false
      }
      if (!this.$publicFun.regPhone.test(this.addressinfo.telephone)) {
        uni.showToast({
          icon: 'none',
          title: '请输入正确的手机号!',
        })
        return false
      }
      if (
        this.addressinfo.province == '' ||
        this.addressinfo.city == '' ||
        this.addressinfo.country == ''
      ) {
        uni.showToast({
          icon: 'none',
          title: '请选择省市区！',
        })
        return false
      }
      if (this.addressinfo.address.length < 4) {
        uni.showToast({
          icon: 'none',
          title: '您的地址过短,请详细填写您的地址信息!',
        })
        return false
      }
      this.addressinfo.isDefault = true
      this.addAddressApi()
    },
    //添加地址
    addAddressApi() {
      var that = this
      const data = this.$apiFun.postApi(
        this.$api.createOrUpdateAddresseeApi,
        this.addressinfo
      )
      console.log('data----------', data)
      uni.showToast({
        icon: 'none',
        title: '保存成功！',
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 2000)
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
page {
  background-color: #000000;
}
.address {
  height: auto;
  background-color: #000000;
}
.addressinfolist {
  background-color: #000000;
}
.addressinfoli {
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.addressinfoli:last-child {
  border-bottom: none;
}
.addressinfolileft {
  width: 160rpx;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 28rpx;
  color: rgba(255, 255, 255,1);
}
.addressinfoliinput {
  width: 560rpx;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 28rpx;
  color: rgba(255,255,255,1);
}
.addressinfoli .right {
  padding-right: 15rpx;
  box-sizing: border-box;
  // background: url('@{imgUrl}godtail.png') no-repeat right;
  background-position-y: center;
  background-size: 12rpx 22rpx;
}
.addressinfolione {
  padding: 25rpx 30rpx;
}
.addressinfolione .addressinfolileft {
  line-height: 48rpx;
}
.addressinfolitextarea {
  font-size: 28rpx;
  color: rgba(255,255,255,1);
  height: 180rpx;
  box-sizing: border-box;
  padding: 0;
}
.addressinfodefault {
  width: 620rpx;
}
.deladdress {
  margin-top: 4rpx;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #ffd8d6;
  font-size: 28rpx;
  color: #ec453d;
  text-align: center;
}
.saveaddress {
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20rpx;
  width: 100%;
  height: 40px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  .saveaddressBtn {
    width: 45%;
    background-color: #e42e3c;
  }
  .saveaddressBtn1 {
    background-color: #eca63d;
  }
}
</style>
